<template>
  <div id="container">
  <div id="back" @click="back" > <icon type="cancel" ></icon></div>

    <div class="swiper" >
      <swiper :list="demo01_list" height="270px" dots-position="center"></swiper>
    </div>
<div class="content1">
  <span class="my-title">{{detail.title}}</span>
  <div class="tags">
    <div class="tag" v-if="typeof (detail.tags) != 'string' " v-for="tag in detail.tags" >{{tag}}</div>
    <div class="tag"  v-else="typeof (detail.tags) == 'string' ">{{tag}}</div>

  </div>
</div>
<hr>
<div class="content2">
  <div class="my">
    <div class="key">￥{{detail.priceNum}}/月</div>
    <div class="value">租金</div>
  </div>
    <div class="my">
        <div class="key">{{detail.roomTypeName}}</div>
    <div class="value">房型</div>
    </div>
      <div class="my">
          <div class="key">{{detail.size}}平方米</div>
    <div class="value">面积</div>
      </div>
</div>
<hr>
<div class="content3">
    <div class="decoration">
      <div class="key">装修:</div>
      <div class="value">精装</div>
      </div>
     <div class="decoration">
          <div class="key">朝向:</div>
      <div class="value">{{detail.direction}}</div>
     </div>
     <div class="decoration">
          <div class="key">楼层:</div>
      <div class="value">{{detail.floor}}</div>
     </div>
    <div class="decoration">
         <div class="key">类型:</div>
      <div class="value">普通住宅</div>
    </div>
</div>
<hr>
<div class="content4">
  <div class="place">
    小区：{{detail.community}}

  </div>
  <!-- map -->
  <baidu-map :center="center" :zoom="map_zoom" class="baidu-map-view" ak="mapAK"
               @ready="map_handler">
  </baidu-map>
</div>
<hr>
<div class="content5">
  <div class="key">房屋配套</div>
  <hr>
  <div class="value">暂无数据</div>
</div>
<div class="content6">
   <div class="key">房屋概况</div>
   <hr>
   <div class="value">
     <img class="userhead" src="../../../static/my.jpg">
     <div class="dis">
        <div class="top">王女士</div>
        <div class="buttom">      <icon type="safe-success"></icon> 认证用户</div>
     </div>
      <div class="btn">
        <button>发消息</button>
      </div>

     </div>
    <div class="details">{{detail.description}}</div>
   </div>
   <hr></hr>
  <div class="content7">
      <div class="title">猜你喜欢</div>

  <div class="mylist">
<group class="mycell" >
        <cell-box class="cell1" v-for="like in likeList">
          <img :src="imgUrl+like.pictureUrl" >
          <div class="more-right"  @click="goNext(like)">
            <span class="title">{{like.title}}</span>
            <span class="subtitle">{{like.roomType}}/{{like.size}}/{{like.orientedName}}/{{like.community}}</span>


            <div  class="tag">
              <div class="tag1" v-for="tag in like.tags" >{{tag}}</div>
            </div>
            <span class="price">￥{{like.priceNum}}/月</span>
          </div>
        </cell-box>
      </group>
  </div>
   </div>

</div>


</template>


<script>




 import RectMaker from "../../js/maker/RectMaker"
 import ComplexCustomOverlay from "../../js/ComplexCustomOverlay"
 import { Swiper } from 'vux'
  import {Icon} from 'vux'
  export default {
     components: { Swiper,Icon},
    name:'Detail',
    props: {
    id: {
      type: Number,
      default: 1
    }
    },
     watch:{
      id(val, oldVal){//普通的watch监听
        this.houseId= val
        this.loadData()
      },
     },
    data(){
      return {
        demo01_list:[],//默认为空
         map_zoom: 31,
         center: {lng: 116.407845, lat: 39.914101},
         BMap:null,
         map:null,
         cityName:'',
         houseId: 1,
         likeList: {},
         detail:{},
        //没有使用跳转的最新解决方案  压栈
          detailstack:[]
      }
    },
    methods: {

      goNext(likeitem){
          //重新加载
          this.houseId=likeitem.id;
          this.loadData();
      },
      back(){
        if(this.detailstack.length==1){
          this.$emit("close",false)
        }else{
          this.detailstack.pop(this.detailstack.length-1);
          var my = this.detailstack[this.detailstack.length-1]
            this.likeList =  my.likeList
              this.detail= my.detail
        }
      },
        map_handler({BMap, map}) {
          this.BMap = BMap;
          this.map = map;

      },
      loadData(){
        this.$http.loadData("/houses/house?houseId="+this.houseId+"&areaName="+this.cityName)
        .then(
          (res) =>{
              //处理图片
             this.likeList = res.data.likeList
              this.detail=res.data.detail
               this.detailstack.push(res.data)    //数据存在缓存，优化用户体验
              //处理数据detail

              this.detail.imgs = this.detail.imgs.split('|')
              var my=[]
              for(let i in this.detail.imgs){

                 my.push ( {
                   url: 'javascript:',
                   img: this.imgUrl1+"img/"+ this.detail.imgs[i],
                   title: ''
                 })
              }
              this.demo01_list = my;
              this.detail.tags= this.detail.tags.split('|')
              this.center.lng=this.detail.coord.longitude
              this.center.lat = this.detail.coord.latitude
              //处理数据like
              for(let index in this.likeList){
                  this.likeList[index].pictureUrl = this.likeList[index].pictureUrl.split('|')[0]
                  this.likeList[index].tags = this.likeList[index].tags.split('|')
                  if(this.likeList[index].tags[0] ==''){
                      this.likeList[index].tags=[]
                  }
              }
              //加入障碍物

              var data1 = new ComplexCustomOverlay(this.BMap,
                    new BMap.Point(this.center.lng,this.center.lat),
                     this.detail.community,
                    this.map,
                    new RectMaker(),//传入回调方法
                    ''
                  )
              this.map.addOverlay(data1)
          }
        )
      }
    },
    created(){
        var storage=window.localStorage;
        this.cityName = storage["cityName"]
    },
    mounted() {

    }
  }
</script>
<style scoped lang='less'>

#container{
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  white-space: nowrap;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
  .swiper{
    z-index: 1;
    position: relative;
    top:-30px;
}
  //display: flex;
 // flex-direction: column;
}
#back{
  position: relative;
    height: 30px;
    z-index: 10;
    background-color: rgba(0,0,0,0.3);
}

.content7{
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin-left: 5%;
  .title{
    width: 100% ;
    height: 20px;
    font-size: 18px;
  }
  .mylist{
    width: 100% ;
     .mycell {
    background-color: white;
    padding: 0px;
    width: 100%;
    height: 340px;
  }

  .mycell .cell1 {
    padding: 0px;
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .mycell .cell1 img {
    height: 100px;
    width: 130px;
    margin-left: 10px;
  }

  .mycell .cell1 .more-right {
    height: 100px;
    width: 200px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .mycell .cell1 .more-right .title {
    width: 100%;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 24px;
    font-weight: 400;
  }

  .mycell .cell1 .more-right .subtitle {
    width: 100%;
    overflow: hidden;
    height: 24px;
    font-size: 20px;
    font-weight: 100;
    color: rgba(0, 0, 0, 0.5);
  }

  .mycell .cell1 .more-right .tag {
    width: 100%;
    overflow: hidden;
    height: 24px;
    display: flex;

  }

  .mycell .cell1 .more-right .tag1 {
    line-height: 80%;
    margin-right: 10px;
      font-size: 10px;
    height: 17px;
    border-radius: 5%;
    background: rgb(215,252,252);
    color: rgb(34, 219, 117);
    text-align: center;
    line-height: 17px;
  }

  .mycell .cell1 .more-right .price {
    font-weight: 700;
    width: 100%;
    overflow: hidden;
    height: 24px;
    font-size: 20px;
    color: red;
  }
    }
  }

  .content6 {
     margin-left: 5%;
      width: 90%;
      display: flex;
      flex-wrap: wrap;

      .key{
             display: flex;
          font-size: 25px;
          width: 100%;
          height: 40px;

      }
      .value{
          display: flex;
         .userhead{
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
          .dis{
            margin-left: 10px;
            width: 180px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .top{
              font-size: 20px;

            }
            .buttom{
          font-size: 15px;
            }
          }



       width: 100%;
        .btn{
          display: flex;
          align-items: center;
          button{
            color: mediumseagreen;
            border: lightgreen 1px solid;
            background-color: white;
            width: 75px;
            height: 28px;
            border-radius: 5%;
          }
        }
      }
      .details{
        overflow: hidden;
        margin-top: 20px;
        width: 100%;
        font-size: 18px;
      }

  }



 .baidu-map-view {
    width: 100%;
    height: 200px;
  }
.content1{
  .my-title{
    width: 100%;
    overflow: hidden;
  }
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  .tags{
    display: flex;
    width: 100%;
      margin-top: 10px;
      .tag{
        font-size: 20px;
    height: 50%;
    border-radius: 5%;
    background: rgb(215,252,252);
    color: rgb(34, 219, 117);
    text-align: center;
      }
  }
}
.swiper-container{

  width: 100%;
  height: 270px;

}
.swiper-pagination{
  background: yellow;
  width: 100px;
  height: 100px;
}
hr{
  width: 90%;
}
.content2{
    display:flex;
    justify-content: center;
    .my{
      width: 30%;
      display: flex;
      flex-direction: column;
      .key{
        text-align: center;
        font-size: 23px;
        height: 50%;
        width: 100%;
        color: red;
      }
      .value{
          color: rgba(0,0,0,0.4);
        font-size: 23px;
        text-align: center;
           height: 50%;
        width: 100%;
      }
    }
}
.content3{
  display: flex;
  width: 90%;
  height: 60px;
  flex-wrap: wrap;
  .decoration{
    width: 50%;
    height: 50%;
    display: flex;
    .key{
      text-align: center;
      width: 30%;
      height: 100%;
      font-size: 10px;
    }
    .value{
      font-size: 10px;
      font-weight: 700;
      height: 100%;
    }
  }

}
.content4{
  margin-left: 5%;
  width: 90%;
  .place{
    margin-bottom: 20px;
      font-size: 18px;
      font-weight: 400;
  }
}
.content5{
  display: flex;
  flex-wrap: wrap;
      width: 90%;
      margin-left: 5%;
  .key{
    width: 100%;
    font-size: 25px;
    font-weight: 500;
  }
  .value{
        width: 100%;
    font-size: 20px;
    font-weight: 300;
  }
}
</style>
